<div class="main-container">
  <div class="row">
    <div fGrid="6" class="free-demo-board">
      <p>
        {{'DEMO.INPUTTEXT.DESCRIPTION' | translate}}
      </p>
      <hr>
      <h3 class="free-head-title">{{'API-OPTION' | translate}}<span class="symbol component"></span></h3>

      <div class="free-demo-row">
        <h3 class="free-title">free-inputtext</h3>
        <p>{{'COMPONENT.INPUTTEXT' | translate}}</p>
        <free-table>
          <free-table-header>
            <free-table-row>
              <free-table-head><ng-template>{{'PROPERTY' | translate}}</ng-template></free-table-head>
              <free-table-head><ng-template>{{'TYPE' | translate}}</ng-template></free-table-head>
              <free-table-head><ng-template>{{'DESCRIPTION' | translate}}</ng-template></free-table-head>
            </free-table-row>
          </free-table-header>

          <free-table-body>
            <free-table-row>
              <free-table-cell>theme</free-table-cell>
              <free-table-cell>
                <ng-template><code>String</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>{{'DEMO.INPUTTEXT.OPTION.0' | translate}}</ng-template>
              </free-table-cell>
            </free-table-row>
            <free-table-row>
              <free-table-cell>placeholder</free-table-cell>
              <free-table-cell>
                <ng-template><code>String</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>{{'DEMO.INPUTTEXT.OPTION.1' | translate}}</ng-template>
              </free-table-cell>
            </free-table-row>
            <free-table-row>
              <free-table-cell>pattern</free-table-cell>
              <free-table-cell>
                <ng-template><code>String</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>
                  <span [innerHTML]="'DEMO.INPUTTEXT.OPTION.2' | translate"></span>
                </ng-template>
              </free-table-cell>
            </free-table-row>
            <free-table-row>
              <free-table-cell>message</free-table-cell>
              <free-table-cell>
                <ng-template><code>String</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>{{'DEMO.INPUTTEXT.OPTION.3' | translate}}</ng-template>
              </free-table-cell>
            </free-table-row>
            <free-table-row>
              <free-table-cell>icon</free-table-cell>
              <free-table-cell>
                <ng-template><code>String</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>{{'DEMO.INPUTTEXT.OPTION.4' | translate}}</ng-template>
              </free-table-cell>
            </free-table-row>
            <free-table-row>
              <free-table-cell>type</free-table-cell>
              <free-table-cell>
                <ng-template><code>String</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>{{'DEMO.INPUTTEXT.OPTION.5' | translate}}</ng-template>
              </free-table-cell>
            </free-table-row>
            <free-table-row>
              <free-table-cell>disabled</free-table-cell>
              <free-table-cell>
                <ng-template><code>Boolean</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>{{'DEMO.INPUTTEXT.OPTION.6' | translate}}</ng-template>
              </free-table-cell>
            </free-table-row>
          </free-table-body>
        </free-table>
      </div>
    </div>

    <div class="free-demo-board" fGrid="6">
      <div class="free-card-board">
        <h3 class="free-toolbar">Import</h3>
        <free-tab-group direction="right" theme="line">
          <free-tab header="CODE">
            <free-code lang="typescript">
              import &#123;InputtextModule&#125; from 'freeng/freeng';
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">Default</h3>
        <free-tab-group direction="right">
          <free-tab header="PREVIEW">
            <p style="width: 100%;">{{value}}</p>
            <p>
              <free-inputtext [(ngModel)]="value">
                Email address
              </free-inputtext>
            </p>
            <p>
              <free-inputtext [disabled]="true" [placeholder]="'Disabled'"></free-inputtext>
            </p>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html">
              &lt;free-inputtext&gt;&lt;/free-inputtext&gt;
              &lt;free-inputtext [disabled]="true" [placeholder]="'Disabled'"&gt;&lt;/free-inputtext&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">Validator</h3>
        <free-tab-group direction="right">
          <free-tab header="PREVIEW">
            <p>
              <free-inputtext theme="success" [inline]="true"></free-inputtext>
              <free-inputtext theme="error"></free-inputtext>
              <free-inputtext theme="warning"></free-inputtext>
            </p>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html">
              &lt;free-inputtext theme="success"&gt;&lt;/free-inputtext&gt;
              &lt;free-inputtext theme="error"&gt;&lt;/free-inputtext&gt;
              &lt;free-inputtext theme="warning"&gt;&lt;/free-inputtext&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">Prefix</h3>
        <free-tab-group direction="right">
          <free-tab header="PREVIEW">
            <free-inputtext prefix="user"></free-inputtext>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html">
              &lt;free-inputtext prefix="user"&gt;&lt;/free-inputtext&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">Icon</h3>
        <free-tab-group direction="right">
          <free-tab header="PREVIEW">
            <free-inputtext icon="search"></free-inputtext>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html">
              &lt;free-inputtext icon="search"&gt;&lt;/free-inputtext&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">Pattern</h3>
        <free-tab-group direction="right">
          <free-tab header="PREVIEW" class="input-pattern">
            <p>
              <free-inputtext placeholder="{{'DEMO.INPUTTEXT.VALIDATION.0' | translate}}" pattern="tel"
                              message="{{'DEMO.INPUTTEXT.VALIDATION.1' | translate}}"></free-inputtext>
            </p>
            <p>
              <free-inputtext placeholder="{{'DEMO.INPUTTEXT.VALIDATION.2' | translate}}" pattern="email"
                              message="{{'DEMO.INPUTTEXT.VALIDATION.3' | translate}}"></free-inputtext>
            </p>
            <p>
              <free-inputtext placeholder="{{'DEMO.INPUTTEXT.VALIDATION.4' | translate}}" pattern="card"
                              message="{{'DEMO.INPUTTEXT.VALIDATION.5' | translate}}"></free-inputtext>
            </p>
            <p>
              <free-inputtext placeholder="{{'DEMO.INPUTTEXT.VALIDATION.6' | translate}}" pattern="chinese"
                              message="{{'DEMO.INPUTTEXT.VALIDATION.7' | translate}}"></free-inputtext>
            </p>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html">
              &lt;free-inputtext placeholder="{{'DEMO.INPUTTEXT.VALIDATION.0' | translate}}" pattern="tel"
                                   message="{{'DEMO.INPUTTEXT.VALIDATION.1' | translate}}"&gt;&lt;/free-inputtext&gt;
              &lt;free-inputtext placeholder="{{'DEMO.INPUTTEXT.VALIDATION.2' | translate}}" pattern="email"
                              message="{{'DEMO.INPUTTEXT.VALIDATION.3' | translate}}"&gt;&lt;/free-inputtext&gt;
              &lt;free-inputtext placeholder="{{'DEMO.INPUTTEXT.VALIDATION.4' | translate}}" pattern="card"
                              message="{{'DEMO.INPUTTEXT.VALIDATION.5' | translate}}"&gt;&lt;/free-inputtext&gt;
              &lt;free-inputtext placeholder="{{'DEMO.INPUTTEXT.VALIDATION.6' | translate}}" pattern="chinese"
                              message="{{'DEMO.INPUTTEXT.VALIDATION.7' | translate}}"&gt;&lt;/free-inputtext&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">Type</h3>
        <free-tab-group direction="right">
          <free-tab header="PREVIEW">
            <free-inputtext type="password"></free-inputtext>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html">
              &lt;free-inputtext type="password"&gt;&lt;/free-inputtext&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>
    </div>
  </div>
  <blockquote>FreeNG - {{'MOTTO' | translate}}</blockquote>
</div>

